<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>驾车路线规划</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=OyXhkqKyYV79SLPax9ywt7uCL9jpjtbY"></script>
<style type="text/css">
body, html,#container {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new BMap.Map("container"); 
map.centerAndZoom(new BMap.Point(116.404, 39.915), 17); 
var driving = new BMap.DrivingRoute(map, { 
    renderOptions: { 
        map: map, 
        autoViewport: true 
    }
});
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 220){
        console.log(xhr.responseText);
        var data = JSON.parse(xhr.responseText);
        console.log(data.itemsCity);
        var start = new BMap.Point(data.itemsCity[0].longitude,data.itemsCity[0].latitude);
        var end = new BMap.Point(data.itemsCity[1].longitude,data.itemsCity[1].latitude);
        driving.search(start, end);


    }


}
xhr.open('GET','https://www.easy-mock.com/mock/5d0de4f2b596d756a7afd9fb/TS/geographyGrid');
xhr.send();
map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
</script>
</body>
</html>